import * as d3 from "d3";

function NobelPrize(data, { 
  marginTop = 40,
  marginRight = 120,
  marginBottom = 40,
  marginLeft = 60,
  width = 800,
  height = 700, 
  innerWidth = width - marginLeft - marginRight,
  innerHeight = height - marginTop - marginBottom,
} = {}) {

  // 创建SVG容器
  const svg = d3.select('#nobel-prize')
    .attr('width', width)
    .attr('height', height)
    .append('g')
    .attr('transform', `translate(${marginLeft},${marginTop})`);

  // 创建X轴比例尺
  const x = d3.scaleLinear()
    .domain([0, 425])
    .range([0, innerWidth]);

  // 创建Y轴比例尺
  const y = d3.scaleBand()
    .domain(data.map(d => d.country))
    .range([0, innerHeight])
    .padding(0.1);

  // 添加X轴
  svg.append('g')
    .attr('transform', `translate(0,${innerHeight})`)
    .call(d3.axisBottom(x))
    .selectAll('text')
    .style('font-size', '12px');

  // 添加Y轴
  svg.append('g')
    .call(d3.axisLeft(y))
    .selectAll('text')
    .style('font-size', '12px');

  // 添加标题
  svg.append('text')
    .attr('x', innerWidth / 2)
    .attr('y', -marginTop / 2)
    .attr('text-anchor', 'middle')
    .style('font-size', '16px')
    .text('诺贝尔奖得主分布（1901-2023）');

  // 定义悬浮时的高亮颜色
  const hoverColor = '#9b59b6';
  const topCountriesColor = '#4a235a';
  const normalColor = '#d2b4de';

  // 添加tooltip div
  const tooltip = d3.select("body")
    .append("div")
    .attr("class", "tooltip")
    .style("opacity", 0);

  // 条形图的绘制
  svg.selectAll('rect')
    .data(data)
    .enter()
    .append('rect')
    .attr('x', 0)
    .attr('y', d => y(d.country))
    .attr('width', d => x(d.total))
    .attr('height', y.bandwidth())
    .attr('fill', d => {
      // 根据排名使用不同的颜色
      if (d.total > 100) return topCountriesColor;  // 前几名用深色
      return normalColor;  // 其他用浅色
    })
    .attr('opacity', 0.9)
    // 增强交互效果
    .on('mouseover', function(event, d) {
      // 高亮条形
      d3.select(this)
        .transition()
        .duration(200)
        .attr('opacity', 1)
        .attr('fill', hoverColor);
      
      // 显示tooltip
      tooltip.transition()
        .duration(200)
        .style("opacity", .9);
      
      // 构建tooltip内容
      const tooltipContent = `
        <strong>${d.country}</strong><br/>
        总计: ${d.total}<br/>
        物理学: ${d.physics}<br/>
        化学: ${d.chemistry}<br/>
        生理学或医学: ${d.medicine}<br/>
        文学: ${d.literature}<br/>
        和平: ${d.peace}<br/>
        经济学: ${d.economics}
      `;
      
      tooltip.html(tooltipContent)
        .style("left", (event.pageX + 10) + "px")
        .style("top", (event.pageY - 28) + "px");
    })
    .on('mouseout', function(event, d) {
      // 恢复条形样式
      d3.select(this)
        .transition()
        .duration(200)
        .attr('opacity', 0.9)
        .attr('fill', d => {
          if (d.total > 100) return topCountriesColor;
          return normalColor;
        });
      
      // 隐藏tooltip
      tooltip.transition()
        .duration(500)
        .style("opacity", 0);
    });

  // 优化数值标签
  svg.selectAll('.value')
    .data(data)
    .enter()
    .append('text')
    .attr('class', 'value')
    .attr('x', d => x(d.total) + 5)
    .attr('y', d => y(d.country) + y.bandwidth() / 2)
    .attr('dy', '0.35em')
    .text(d => d.total)
    .style('font-size', '12px')
    .style('font-weight', 'bold')
    .style('fill', 'black');

  // 添加网格线
  svg.selectAll('line.grid')
    .data(x.ticks())
    .enter()
    .append('line')
    .attr('class', 'grid')
    .attr('x1', d => x(d))
    .attr('x2', d => x(d))
    .attr('y1', 0)
    .attr('y2', innerHeight)
    .style('stroke', '#e0e0e0')
    .style('stroke-dasharray', '3,3');

  return svg;
}

export default NobelPrize;